<template>
	<view class="page">
		<Navbar title="发布招聘信息"></Navbar>
		<view class="form">
			<view class="form-data">
				<view class="label">标题</view>
				<input class="value" type="text" placeholder="请输入标题" v-model="formData.Title" />
			</view>
			<view class="form-data">
				<view class="label">服务地址</view>
				<input class="value" type="text" placeholder="填写服务地址" v-model="formData.Addr" />
			</view>
			<view class="form-data">
				<view class="label">联系电话</view>
				<input class="value" type="text" placeholder="请输入联系电话" v-model="formData.Tel" />
			</view>
			<view class="form-data">
				<view class="label">联系老师</view>
				<input class="value" type="text" placeholder="请输入联系老师" v-model="formData.Teacher" />
			</view>
			<view class="form-data">
				<view class="label">上岗时间</view>
				<view class="value u-flex" @click="showTime = true">
					<text class="u-tips-color u-padding-right-10">{{ formData.WorkTime || '请选择' }}</text>
					<image style="width: 13rpx;height: 24rpx;" src="/static/image/icon-right.png"></image>
				</view>
			</view>
			<view class="form-data">
				<view class="label">假期</view>
				<input class="value" type="text" placeholder="请输入假期" v-model="formData.Holiday" />
			</view>
			<view class="form-data">
				<view class="label">工资</view>
				<input class="value" type="text" placeholder="请输入工资" v-model="formData.Salary" />
			</view>
			<view class="form-data">
				<view class="label">内容介绍</view>
				<u-input v-model="formData.Content" type="textarea" placeholder="请输入内容介绍（300字以内）" maxlength="300"
					:border="false" :height="200" :auto-height="true" />
			</view>
		</view>

		<view style="height: 200rpx;"></view>
		<view class="u-flex footer-button">
			<view class="u-flex-1"><u-button type="primary" shape="circle" @click="confirmForm"> 提交 </u-button></view>
		</view>

		<u-picker mode="time" v-model="showTime" :params="paramsTime" @confirm="confirmTime"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					Title: '',
					Addr: '',
					Tel: '',
					Teacher: '',
					WorkTime: '',
					Holiday: '',
					Salary: '',
					Content: '',
				},
				showTime: false,
				paramsTime: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showRegion: false,
				showEducation: false,
				formType: 1
			};
		},
		onLoad(e) {

		},
		methods: {
			confirmTime(e) {
				this.formData.WorkTime = `${e.year}-${e.month}-${e.day}`;
			},
			confirmForm() {
				const _this = this;
				let errorMessage = '';
				if (!this.formData.Content) {
					errorMessage = '请输入内容介绍';
				}
				if (!this.formData.Salary) {
					errorMessage = '请输入工资';
				}
				if (!this.formData.Holiday) {
					errorMessage = '请输入假期';
				}
				if (!this.formData.WorkTime) {
					errorMessage = '请选择上岗时间';
				}
				if (!this.formData.Teacher) {
					errorMessage = '请输入联系老师';
				}
				if (!this.$u.test.mobile(this.formData.Tel)) {
					errorMessage = '请输入联系电话';
				}
				if (!this.formData.Addr) {
					errorMessage = '填写服务地址';
				}
				if (!this.formData.Title) {
					errorMessage = '请输入标题';
				}
				if (errorMessage) {
					uni.showToast({
						title: errorMessage,
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				let api = null;
				this.$u.api.Insert(this.formData).then(res => {
					console.log(res);
					if (res && res.code == 0) {
						uni.showToast({
							title: '需求提交成功，请关注需求列表',
							icon: 'none'
						});
						setTimeout(() => {
							_this.$u.route({
								type: 'navigateBack'
							});
						}, 2000);

					} else {
						uni.showToast({
							title: res?.message ?? '登记失败',
							icon: 'none'
						});
					}
					uni.hideLoading();
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f4f5f7;
	}

	.form {
		padding: 30rpx 20rpx 40rpx;
		background-color: #fff;
	}

	.form-data {
		position: relative;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #dcdcdc;

		&:last-child {
			border: none;
		}

		.label {
			font-size: 28rpx;
			font-weight: 600;
		}

		.value {
			height: 70rpx;
		}

		.get-phone {
			position: absolute;
			bottom: 15rpx;
			right: 20rpx;
			color: $u-type-primary;
		}
	}

	.footer-button {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
		width: 100%;
		height: 98rpx;
		padding: 13rpx 20rpx;
		background-color: #ffffff;

		image {
			width: 58rpx;
			height: 58rpx;
			margin-right: 30rpx;
		}
	}
</style>